<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="./common.js"></script>
    <style type="text/css">
        #dv {
            margin: 0 auto;
            text-align: center;
            border: 1px solid green;
            width: 500px;
            height: 400px;
            background-image: url("./Sys Sun images/bgi.jpg");
        }
    </style>
</head>

<body>
    <div id="dv">
        <canvas id="solar" width="300" height="300"></canvas>
    </div>
</body>
<script type="text/javascript">
    let sun;
    let earth;
    let moon;
    let ctx;

    function init() {
        sun = new Image();
        earth = new Image();
        moon = new Image();
        sun.src = "./Sys Sun images/sun.jpg";
        earth.src = "./Sys Sun images/earth.jpg";
        moon.src = "./Sys Sun images/moon.jpg";

        let canvas = document.querySelector("#solar");
        ctx = canvas.getContext("2d");

        sun.onload = function() {
            draw()
        }

    }
    init();

    function draw() {
        ctx.clearRect(0, 0, 300, 300); //清空所有的内容
        /*绘制 太阳*/
        ctx.drawImage(sun, 130, 130, 40, 40);

        ctx.save();
        ctx.translate(150, 150);

        //绘制earth轨道
        ctx.beginPath();
        ctx.strokeStyle = "rgba(255,255,0,0.5)";
        ctx.arc(0, 0, 100, 0, 2 * Math.PI)
        ctx.stroke()

        let time = new Date();
        //绘制地球
        ctx.rotate(2 * Math.PI / 60 * time.getSeconds() + 2 * Math.PI / 60000 * time.getMilliseconds())
        ctx.translate(100, 0);
        ctx.drawImage(earth, -12, -12, 30, 30)

        //绘制月球轨道
        ctx.beginPath();
        ctx.strokeStyle = "rgba(255,255,255,.3)";
        ctx.arc(0, 0, 40, 0, 2 * Math.PI);
        ctx.stroke();

        //绘制月球
        ctx.rotate(2 * Math.PI / 6 * time.getSeconds() + 2 * Math.PI / 6000 * time.getMilliseconds());
        ctx.translate(40, 0);
        ctx.drawImage(moon, -3.5, -3.5, 20, 20);
        ctx.restore();
        requestAnimationFrame(draw)
    }

    my$("btn3").onclick = function() {
        window.history.back(); //后退
    }
</script>

</html>